<template>
	<div class="zhiShiFenLei">
		<!-- 主体表格 -->
		<div class="left">
			<div class="bfff left-bottom">
				<div class="center flex-start fWrap table-head">
					<el-button class="primary" type="primary" @click="addList" v-auth="['system:protocol:save']"
						>+新增</el-button
					>
					<el-button
						class="danger"
						type="danger"
						@click="delDirectory"
						plain
						v-auth="['system:protocol:deleteBatch']"
						>批量删除
					</el-button>
				</div>
				<div class="table-scrol">
					<el-table :data="tableData" style="width: 100%" @select="selectClick" @select-all="selectClick">
						<el-table-column align="center" type="selection" min-width="30" />
						<el-table-column align="center" prop="code" label="协议编号" min-width="250">
							<!-- <template #default="{ row }">
								<div class="pcImage">
									<img :src="row.pcImage" alt="" />
								</div>
							</template> -->
						</el-table-column>
						<el-table-column align="center" prop="title" label="协议标题" min-width="200" />
						<el-table-column align="center" prop="status" label="状态" min-width="200">
							<template #default="{ row }">
								<el-tag type="success" v-if="row.status == 1">生效</el-tag>
								<el-tag type="danger" v-else>未生效</el-tag>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="address" label="操作" min-width="200">
							<template #default="{ row }">
								<div class="table-color">
									<el-button
										plain
										:icon="View"
										@click="details(row)"
										v-auth="['system:protocol:info']"
									></el-button>
									<el-button
										plain
										:icon="EditPen"
										@click="modify(row)"
										v-auth="['system:protocol:edit']"
									></el-button>
									<el-button
										plain
										:icon="Delete"
										@click="delTable(row)"
										v-auth="['system:protocol:delete']"
									></el-button>
								</div>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
					</el-table>
					<div class="bfff pagination-class">
						<v-pagination
							:total="total"
							v-model:size="pageSize"
							v-model:page="current"
							@pagination="fetchList"
							@paginations="fetchLists"
						></v-pagination>
					</div>
				</div>
			</div>
		</div>
		<el-dialog
			class="cheng-dialog"
			v-model="visible"
			:show-close="false"
			:before-close="quxiao"
			:close-on-click-modal="false"
			destroy-on-close
			width="800px"
		>
			<template #header="{ close, titleId, titleClass }">
				<div class="dialog-header center btheme cfff">
					<img src="@/assets/image/houTai/xqun.png" alt="" />
					<div class="flex f16 fbold">{{ title }}</div>
					<el-icon class="pointer" size="20" color="#fff" @click="quxiao">
						<Close />
					</el-icon>
				</div>
			</template>
			<div class="dialog-content">
				<el-form
					ref="ruleFormRef"
					:model="ruleForm"
					:rules="rules"
					class="demo-ruleForm"
					status-icon
					@submit.native.prevent
					label-width="80px"
				>
					<div class="center">
						<div class="flex">
							<el-form-item label="协议编号" prop="code">
								<el-input
									v-model="ruleForm.code"
									:disabled="title == '查看'"
									maxlength="20"
									show-word-limit
								></el-input>
							</el-form-item>
							<el-form-item label="协议标题" prop="title">
								<el-input
									v-model="ruleForm.title"
									:disabled="title == '查看'"
									maxlength="20"
									show-word-limit
								></el-input>
							</el-form-item>
							<el-form-item label="协议内容" prop="content">
								<v-editor v-model="ruleForm.content" :disabled="title == '查看'"></v-editor>
							</el-form-item>
							<el-form-item label="状态" prop="status">
								<el-switch
									v-model="ruleForm.status"
									:active-value="qiyong"
									:inactive-value="jinyong"
									active-text="启用"
									:disabled="title == '查看'"
								/>
							</el-form-item>
						</div>
					</div>
				</el-form>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="quxiao">取消</el-button>
					<el-button type="primary" @click="submitForm(ruleFormRef)"> 确定 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { Delete, EditPen, View } from "@element-plus/icons-vue"
import { ElMessage, ElMessageBox } from "element-plus"

const route = useRoute()
const router = useRouter()
const total = ref(0)
const tableData = ref([])
const qiyong = ref(1)
const jinyong = ref(2)
const title = ref("新增")
const switchValue = ref(false)
const visible = ref(false)
const fabu = ref(false)
const modifyId = ref("")
const tableList = ref([])
const ruleFormRef = ref()
const current = ref(1)
const pageSize = ref(10)
const ruleForm = reactive({
	code: "",
	title: "",
	content: "",
	status: 1,
})
const rules = reactive({
	code: [
		{
			required: true,
			message: "请输入协议编号",
			trigger: "blur",
		},
	],
})

async function list() {
	const res = await getAxios(`/system/protocol/page?current=${current.value}&size=${pageSize.value}`)
	total.value = +res.total
	tableData.value = res.records
	tableList.value = []
}
list()
//新增
const addList = () => {
	title.value = "新增"
	visible.value = true
}

// 提交
const submitForm = async formEl => {
	if (fabu.value) {
		return
	} else {
		fabu.value = true
		if (!formEl) return
		await formEl.validate(async (valid, fields) => {
			if (valid) {
				let obj = {}
				obj.code = ruleForm.code
				obj.title = ruleForm.title
				obj.content = ruleForm.content
				obj.status = ruleForm.status
				try {
					if (title.value == "新增") {
						await postAxios("/system/protocol/save", obj)
						ElMessage.success("保存成功")
					} else if (title.value == "编辑") {
						obj.id = modifyId.value
						await postAxios("/system/protocol/edit", obj)
						ElMessage.success("编辑成功")
					}
					fabu.value = false
					visible.value = false
					list()
					del()
				} catch (error) {
					ElMessage.error(error)
					fabu.value = false
				}
			} else {
				ElMessage.error("请填入必填项")
				fabu.value = false
			}
		})
	}
}
// 清空
function del() {
	ruleForm.code = ""
	ruleForm.title = ""
	ruleForm.content = ""
	ruleForm.status = 1
}
//关闭弹窗
const quxiao = () => {
	visible.value = false
	del()
}

//修改
const modify = val => {
	title.value = "编辑"
	modifyId.value = val.id
	ruleForm.code = val.code
	ruleForm.title = val.title
	ruleForm.content = val.content
	ruleForm.status = val.status
	visible.value = true
}

//分页
const fetchList = () => {
	list()
}
const fetchLists = () => {
	list()
}

const delTable = val => {
	ElMessageBox.confirm("是否确认删除", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		try {
			await postAxios(`/system/protocol/delete?id=${val.id}`)
			ElMessage.success("删除成功")
			list()
		} catch (error) {
			ElMessage.error(error)
		}
	})
}

//表格选择
const selectClick = val => {
	tableList.value = val
}

//批量删除
const delDirectory = () => {
	if (tableList.value.length == 0) {
		return ElMessage.error("请选择协议")
	}
	ElMessageBox.confirm("是否确认删除", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		let obj = []
		tableList.value.forEach(item => {
			obj.push(item.id)
		})
		try {
			await postAxios(`/system/protocol/deleteBatch`, obj)
			list()
			ElMessage.success("删除成功")
		} catch (error) {
			ElMessage.error(error)
		}
	})
}
const details = val => {
	title.value = "查看"
	ruleForm.code = val.code
	ruleForm.title = val.title
	ruleForm.content = val.content
	ruleForm.status = val.status
	visible.value = true
}
</script>

<style lang="scss" scoped>
.zhiShiFenLei {
	background-color: #f8f8f8;
	height: 100%;
	.left {
		margin: 25px;
		background-color: #fff;
		height: 100%;
		.left-bottom {
			padding: 15px;
			.table-head {
				margin-bottom: 15px;

				:deep(.el-input) {
					width: 215px;
					height: 25px;
					border-radius: 3px;
					margin-right: 5px;
				}

				.primary {
					width: 90px;
					height: 30px;
					border-radius: 3px;
				}

				.danger {
					width: 90px;
					height: 30px;
					border-radius: 3px;
					margin-left: 10px;
				}
			}
		}
	}
}
.table-color {
	:deep(.el-button) {
		&:focus {
			color: #606266;
			background-color: #fff;
			border: 1px solid #dcdfe6;
		}
	}
}
.pcImage {
	display: flex;
	justify-content: center;
	img {
		width: 100px;
		height: 60px;
	}
}
.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}
.avatar-uploader .el-upload {
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	// transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
.box-item {
	display: flex;
	.left {
		width: 35%;
		padding: 0 25px;
		margin: 0;
	}
	.right {
		width: 60%;
		padding: 20px;
	}
}
.label-icon {
	margin-left: 10px;
	padding-top: 15px;
}
:deep(.el-dialog__body) {
	padding: 30px 80px;
}
.pagination-class {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
:deep(.cheng-dialog) {
	width: 800px !important;
}
</style>
